<template>
	<div>
		<h1>{{ msg }}</h1>

		<!-- 通过父组件给子组件传递函数类型props实现：子给父传数据 -->
		<School :getSchoolName="getSchoolName" />

		<!-- 通过父组件给子组件绑定自定义事件实现：子给父传数据 (第一种写法：使用@) -->
		<!-- <Student @hello="getStudentName" /> -->


		<!-- 通过父组件给子组件绑定自定义事件实现：子给父传数据 (第二种写法：使用ref)-->
		<Student ref="student" @demo="m1"/>
	</div>
</template>

<script>

import Student from './components/Student.vue'
import School from './components/School.vue'



export default {
	name: 'App',
	components: {
		Student,
		School
	},
	data() {
		return {
			msg: '大唐夜探'
		}
	},
	methods: {
		getSchoolName(name) {
			console.log('App收到了名字', name);
		},
		getStudentName(name,...rest) {
			console.log('我是getStudentName被调用了', name,rest);
		},
		m1(){
			console.log('demo事件被触发了');
		}
	},
	mounted() {
		// 绑定自定义事件
		this.$refs.student.$on('hello',this.getStudentName)
	},
}
</script>

